import { StyleSheet, Text, View, Modal, TouchableOpacity } from 'react-native';
import React, { useState } from 'react';
import { Picker } from 'react-native-wheel-pick';
import { useTranslation } from 'react-i18next';
import { px2dp, scale, width } from '~/utils/px2dp';

interface Props {
    visible: boolean;
    onToggleVisible: Function;
    onConfirm?: Function;
}
export default function SelectHeightModal(props: Props) {
    const { visible, onToggleVisible, onConfirm } = props;
    const { t } = useTranslation();
    const [selectIndex, setSelectIndex] = useState('60');
    return (
        <Modal visible={visible} transparent={true} statusBarTranslucent={true} hardwareAccelerated={true}>
            <View style={styles.modal_container}>
                <View style={styles.modal}>
                    <View style={[styles.flex, styles.between]}>
                        <TouchableOpacity
                            onPress={() => {
                                onToggleVisible();
                            }}>
                            <Text>{t('SelectHeightModal.t1')}</Text>
                        </TouchableOpacity>
                        <Text style={{ color: '#000', fontSize: scale(30) }}>{t('SelectHeightModal.t2')}(cm)</Text>
                        <TouchableOpacity
                            onPress={() => {
                                onConfirm && onConfirm(selectIndex ? selectIndex : 60);
                                onToggleVisible();
                            }}>
                            <Text style={styles.confirm_text}>{t('SelectHeightModal.t3')}</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.pickerCard}>
                        <Picker
                            selectedValue={'60'}
                            style={styles.pciker}
                            itemStyle={styles.itemStyle}
                            textSize={24}
                            pickerData={[...Array(240).keys()]}
                            onValueChange={(index) => {
                                setSelectIndex(index);
                                onConfirm && onConfirm(index);
                            }}
                        />
                    </View>
                </View>
            </View>
        </Modal>
    );
}

const styles = StyleSheet.create({
    modal_container: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.6)',
        justifyContent: 'flex-end',
    },
    modal: {
        backgroundColor: '#fff',
        borderTopLeftRadius: 12,
        borderTopRightRadius: 12,
        padding: 14,
    },
    confirm_text: {
        color: '#2C8CF0',
        fontSize: scale(30),
    },
    itemStyle: {
        color: '#191919',
        // fontSize: px2dp(30),
        fontWeight: 'bold',
    },
    pickerCard: {
        flexDirection: 'row',
        alignItems: 'center',
        alignSelf: 'center',
    },
    pciker: {
        marginTop: px2dp(32),
        height: px2dp(600),

        width: width,
        backgroundColor: '#fff',
    },
    flex: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    between: {
        justifyContent: 'space-between',
    },
});
